import React, { Component } from 'react';
import MenuConfig from './../../config/menuConfig'
import { Menu, Icon } from 'antd';
export default class NavLeft extends Component{
    componentWillMount() {
        const menuTreeNode = this.renderMenu(MenuConfig)
        this.setState({
            menuTreeNode
        })
    }
    // 菜单渲染
    renderMenu = (data) => {
        const SubMenu = Menu.SubMenu;
        return data.map((item) => {
            if(item.children){
                
                return (
                    <SubMenu key={item.key} title={<span><Icon type="appstore" /><span>{item.title}</span></span>}>
                        {this.renderMenu(item.children)}
                    </SubMenu>
                )
            }
            return <Menu.Item key={item.key}>{item.title}</Menu.Item>
        })
    }
    render (){
        function handleClick(e) {
            console.log('click', e);
        }
        return (
            <div style={{backgroundColor:'gray','height':'calc(100vh)'}}>
                <div className="logo">
                   <h1>LOGO</h1>
                   <Menu onClick={handleClick} style={{ width: '100%' }} mode="vertical" theme="dark">
                        {this.state.menuTreeNode}
                    </Menu>
                </div>
            </div>
        )
    }
}